<template>
  <div id="categorys">
    <div class="category-head">
      <Icon type="ios-bookmarks" />
      <span> 分类</span>
    </div>
    <ul id="category-items">
      <li v-for="(item,index) in typeList"
        :key="item.id + '-' + index"
        class="category-item"
      >
        <a v-if="item.childTypes && item.childTypes.length !== 0">
          <span class="category-item-name" v-text="item.name"></span>
          <span class="category-item-icon">
            <Icon type="md-arrow-dropleft" />
          </span> 
        </a>
        <!-- 隐藏分类id 1 -->
        <router-link v-else-if="item.id !== 1" :to="'/category/' + item.id">
          <span class="category-item-name" v-text="item.name"></span>
          <span class="category-item-count" v-text="item.blogCount"></span>
        </router-link>
        <ul v-if="item.childTypes && item.childTypes.length !== 0"
          style="display: none;"
        >
          <li v-for="(item2, index) in item.childTypes"
            :key="item2.id + '-' + index"
          >
            <router-link v-if="item2.blogCount" :to="'/category/' + item2.id">
              <span class="category-item-name" v-text="item2.name"></span>
              <span class="category-item-count" v-text="item2.blogCount"></span>
            </router-link>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import { initCategory } from "utils/utils"

export default {
  name: 'Category',
  computed: {
    typeList() {
      return this.$store.getters['blog/types']
    }
  },
  mounted() {
    initCategory()
    if ($('.category-item').eq(0).find('ul li').length > 0) {
      $('.category-item').eq(0).find('a').click();
    }
  },
}
</script>

<style lang='scss' scoped>
#categorys {
  box-shadow: 0 2px 9px rgba(31,45,61,.15);
  padding: 1rem 1.2rem;
  background: #fff;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  .category-head {
    font-size: 18px;
  }
  a {
    position: relative;
    display: block;
    color: inherit;
    font-size: 16px;
    padding: 0.2rem 0;
    transition: all 0.4s;
    &:hover {
      padding: 0.2rem 0.5rem;
      background-color: rgba(40, 207, 207, 0.73);
    }
  }
  #category-items {
    list-style: none;
    padding: 0.5rem 0.5rem 0;
    .category-item-name {
      display: inline-block;
      width: 80%;
    }
    .category-item-count {
      display: inline-block;
      text-align: right;
      width: 20%;
      padding-right: 6px;
    }
    .category-item-icon {
      display: inline-block;
      text-align: right;
      width: 20%;
    }
    ul {
      list-style: none;
      li {
        padding-left: 1rem;
      }
    }
  }
  
}
</style>